import React, {useState, useEffect} from 'react'
import NavBar from '@components/NavBar'
import ExtractModal from './components/extractModal'
import './styles/index.less'

const My = (props) => {
  const [visible, setVisible] = useState(false)

  useEffect(() => {
  }, [])

  const { amount, balanceUsdt, amountUsdtSubGetToday, amountUsdtSubGet, amountUsdtSubGetAll, teamAll, balanceNana } = props.state

  return (
    <>
      <div className="background"></div>
      <div className="my">
        <NavBar title="个人中心" />
        <div className="my-content">
          <div className="my-header">
            <div className="my-header-name">我的资产</div>
            <div className="my-header-center">
              <div className="usdt-count">
                <span>USDT: {balanceUsdt}</span>
                <span>NANA: {balanceNana}</span>
              </div>
              <button className="extract-btn" onClick={() => setVisible(true)}>提币</button>
            </div>
            <div className="my-header-footer">
              <div className="footer-item">
                <p>充值余额(USDT)</p>
                <p>{Number(amount).toFixed(2)}</p>
              </div>
              <div className="footer-item">
                <p>今日待释放(USDT)</p>
                <p>{Number(amountUsdtSubGetToday).toFixed(2)}</p>
              </div>
              <div className="footer-item">
                <p>剩余释放额度(USDT)</p>
                <p>{Number(amountUsdtSubGet).toFixed(2)}</p>
              </div>
            </div>
          </div>
          <div className="my-main">
            <div className="my-tools">
              <div className="my-tools-title">商场订单</div>
              <ul className="my-tools-list">
                <li onClick={() => props.navigate('/order?tab=0')}>
                  <i className="all-icon"></i>
                  <span>全部</span>
                </li>
                <li onClick={() => props.navigate('/order?tab=2')}>
                  <i className="awaiting-shipment-icon"></i>
                  <span>待发货</span>
                </li>
                <li onClick={() => props.navigate('/order?tab=3')}>
                  <i className="awaiting-delivery-icon"></i>
                  <span>待收货</span>
                </li>
                <li onClick={() => props.navigate('/order?tab=1')}>
                  <i className="completed-icon"></i>
                  <span>已完成</span>
                </li>
              </ul>
            </div>
            <div className="my-tools">
              <div className="my-tools-title">我的收益</div>
              <ul className="my-earnings-list">
                <li>
                  <p>{amountUsdtSubGetAll}</p>
                  <p>静态收益</p>
                </li>
                <li>
                  <p>{teamAll}</p>
                  <p>团队收益</p>
                </li>
              </ul>
            </div>
            <div className="my-tools">
              <div className="my-tools-title">我的服务</div>
              <ul className="my-tools-list">
                <li onClick={() => props.navigate('/bill')}>
                  <i className="bill-icon"></i>
                  <span>我的账单</span>
                </li>
                <li onClick={() => props.navigate('/team')}>
                  <i className="team-icon"></i>
                  <span>我的团队</span>
                </li>
                <li onClick={() => props.navigate('/address')}>
                  <i className="address-icon"></i>
                  <span>地址管理</span>
                </li>
                <li onClick={() => props.navigate('/detail')}>
                  <i className="detail-icon"></i>
                  <span>认购详情</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      {
        visible && <ExtractModal {...props} onClose={() => setVisible(false)} />
      }
    </>
  )
}

export default My;